<template>
  <el-button type="primary" @click="dialogVisible = true">新增</el-button>

  <div>
    <el-select v-model="value" class="m-2" placeholder="Select" size="large">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="选择">
      <template #default="scope">
        <input type="checkbox" v-model="scope.row.checked" />
      </template>
    </el-table-column>
    <el-table-column label="组件名称">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="路径">
      <template #default="scope">
        {{ scope.row.path }}
      </template>
    </el-table-column>
    <el-table-column label="组件">
      <template #default="scope">
        {{ scope.row.com }}
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogVisible" title="新增路由" width="30%">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="组件名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="菜单路径" prop="path">
        <el-input v-model="ruleForm.path" />
      </el-form-item>
      <el-form-item label="组件" prop="com">
        <el-input v-model="ruleForm.com" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-button type="primary" @click="sumbit">确定授权</el-button>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue'
import { routerQuery, routerAdd, typeRouterAdd, typeRouterQuery } from '../services/routerService'
import type { FormInstance, FormRules } from 'element-plus'

interface Router {
  _id?: string
  name: string
  path: string
  type?: number
  com: string
  checked: boolean
}
let dialogVisible = ref<boolean>(false)
const tableData = ref<Array<Router>>([]) //控制显示
const ruleFormRef = ref<FormInstance>() //表单元素
const ruleForm = reactive({
  //数据
  path: '',
  name: '',
  com: ''
})
const value = ref('')

const options = ref<any>([]) //数据源
const validateName = (rule: any, value: any, callback: any) => {
  if (value.length >= 4 && value.length <= 30) {
    callback()
  } else {
    callback(new Error('长度只能是4到30位'))
  }
}
const rules = reactive<FormRules<typeof ruleForm>>({
  //规格
  name: [{ validator: validateName, trigger: 'blur' }],
  path: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
  com: [{ required: true, message: '组件不能为空', trigger: 'blur' }]
})

onMounted(async () => {
  let res = await routerQuery({})

  // console.log(res);
  tableData.value = res.data.result.map((item: any) => {
    item.checked = false
    return item
  })
  
  options.value = res.data.typeList.map((item: any) => {
    return { label: item.name, value: item._id }
  })
})

//编辑事件
const handleEdit = (index: number, row: Router) => {
  console.log(index, row)
}
//删除事件
const handleDelete = async (index: number, row: Router) => {
  console.log(index, row)
  //   alert(row._id)
  // let _id =row._id;
  //   let res = await userDel({
  //     _id
  //   })
  //   if(res.data.code==200){
  //     tableData.value = tableData.value.filter((item)=>{
  //         return item._id!=_id
  //     })
  //   }
}
//提交
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      // console.log(ruleForm)
      //   console.log(ruleForm)
      let res = await routerAdd({
        name: ruleForm.name,
        path: ruleForm.path,
        com: ruleForm.com,
        type: 1
      })
      // console.log(res)

      tableData.value.push(res.data.data[0])
      formEl.resetFields()
      dialogVisible.value = false
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
}

//确定授权
let sumbit = async () => {
  let typeid = value.value

  let checkedList = tableData.value.filter((item) => item.checked)
  console.log(typeid)
  console.log(checkedList)
  if (typeid != '') {
    let res = await typeRouterAdd({
      typeid,
      routerlist: checkedList
    })
    if (res.data.code == 200) {
      alert('授权成功')
    }
  } else {
    alert('请选择类别')
  }
}
watch([value], async () => {
  // alert(value.value);
  let res = await typeRouterQuery({
    typeid: value.value
  })
  let existList = res.data.data
  tableData.value.map((item) => {
    item.checked = false
    if (existList.some((info: any) => info.routerid == item._id)) {
      item.checked = true
    }
    return item
  })
})
</script>
